<template>
  <div class="g-tabbar">
    <router-link :to="{name:'home'}"  tag="div"  class="router">
      <i class="iconfont icon-home"></i>
      <span>首页</span>
    </router-link>
    <router-link :to="{name:'category'}" tag="div" class="router">
      <i class="iconfont icon-category"></i>
      <span>分类</span>
    </router-link>
    <router-link :to="{name:'cart'}" tag="div" class="router">
      <i class="iconfont icon-cart"></i>
      <span>购物车</span>
    </router-link>
    <router-link :to="{name:'personal'}" tag="div" class="router">
      <i class="iconfont icon-personal"></i>
      <span>我的</span>
    </router-link>
  </div>
</template>
<script>
export default {
  name: 'gTabbar'
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/stylus/variables'
.g-tabbar
  height 50px
  display flex
  justify-content space-around
  align-items center
  background #eee
  z-index $tabbar-z-index
  .router
    display flex
    flex-direction column
    align-items center
    .iconfont
      font-size 30px
      padding-bottom 5px
</style>
